import React, { useState } from 'react';
import { Modal, Button, Form, Input, Radio, message, Upload } from 'antd';
import { add } from "../../services/admin"
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { url } from '../../services';


const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
};

const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';

    if (!isJpgOrPng) {
        message.error('你只能上传 JPG/PNG 格式的文件!');
    }

    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }

    return isJpgOrPng && isLt2M;
};


const Add = ({ show }) => {

    const [form] = Form.useForm();

    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = async () => {
        let values = form.getFieldsValue();
        await add({ ...values,username:values.name });
        show();
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();

    const handleChange = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }

        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </div>
    );

    return (
        <>
            <Button type="primary" onClick={showModal}>
                点击添加管理员
            </Button>
            <Modal title="添加管理员" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    form={form}
                    name="addFrom"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                >
                    <Form.Item
                        name="name"
                        label="账号"
                        rules={[
                            {
                                required: true,
                                message: '请输入管理员账号!',
                            }
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="pwd"
                        label="密码"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',

                            }
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="gender"
                        label="性别"
                        rules={[
                            {
                                required: true,
                                message: '请选择性别!',

                            }
                        ]}
                    >
                        <Radio.Group>
                            <Radio value="男">男</Radio>
                            <Radio value="女">女</Radio>
                        </Radio.Group>
                    </Form.Item>


                </Form>
            </Modal>
        </>
    );
};

export default Add;

// import React, { useState } from 'react'
// import InputElement from "../InputElement"
// import RadioElement from "../RadioElement"
// import { add } from '../../services/students'
// export default function Add(props) {
//     let [name, setname] = useState('');
//     let [age, setage] = useState('');
//     let [gender, setgender] = useState('');

//     const handleSubmit = async () => {
//         await add({ name, age, gender });
//         props.show();
//         setname("");
//         setage("");
//         setgender("");
//     };

//     return (
//         <div>
//             <h1>添加学生</h1>
//             <InputElement onInput={(e) => setname(e.target.value)} value={name} >姓名 : </InputElement>
//             <InputElement onInput={(e) => setage(e.target.value)} value={age} >年龄 : </InputElement>
//             <RadioElement
//                 onChange={(e) => setgender(e.target.value)}
//                 value={gender}
//                 name="gender">性别 : </RadioElement>
//             <button onClick={handleSubmit}> 确认增加</button>
//         </div >
//     )
// }
